<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        display: flex;
        flex-wrap: wrap; /*换行*/
        justify-content: space-between;
        width: 1000px;
        margin: 50px auto;
        border: 1px solid #ccc;
        list-style: none;
      }
      ul li {
        margin: 20px 0;
        width: 240px;
        height: 300px;
        background-color: skyblue;
      }

      /*最有一排只有三个的元素，实质是添加伪类元素给撑开了*/
      ul li:last-child:nth-child(4n + 2) {
        /* 240px 一个元素的宽度 */
        margin-right: calc((100% - 240px) / 3 * 2);
      }
      ul li:last-child:nth-child(4n + 3) {
        /* 240px 一个元素的宽度 */
        margin-right: calc((100% - 240px) / 3 * 1);
      }
    </style>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>

      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>

      <li></li>
      <li></li>
    </ul>
  </body>
</html>
